<template>
  <div>
    <van-field
      v-model="value"
      is-link
      name="picker"
      :label="label"
      :placeholder="placeholder"
      @click="showPicker = true"
    />
    <van-popup v-model:show="showPicker" position="bottom">
      <van-picker
        v-if="componentProps.options"
        :columns="componentProps.options"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  Field as VanField,
  Picker as VanPicker,
  Popup as VanPopup,
} from "vant";
export default {
  name: "CommonSelect",
  components: { VanField, VanPicker, VanPopup },
  props: {
    modelValue: {
      type: [String, Number],
      default: "",
    },
    label: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    componentProps: {
      type: Object,
      default: ()=>{},
    },
  },
  watch: {
    modelValue: {
      // 数据变化时执行的逻辑代码
      handler(newValue, oldValue) {
        if (!newValue) {
          this.value = "";
        }
      },
      // 开启深度监听
      deep: true,
    },
  },
  data() {
    return {
      showPicker: false,
      value: "",
    };
  },
  methods: {
    onConfirm(item) {
      this.$emit("update:modelValue", item.value);
      this.value = item.text;
      this.showPicker = false;
    },
  },
};
</script>